
import React, {Component} from 'react';
import { StyleSheet, 
  Text, 
  View, 
  Image, 
  TouchableOpacity
} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import BackButton from '@/components/BackButton';
import SplitView from '@/components/SplitView'
import { width } from '@/util/common'
const imgW = (width-40)/4
export default class ImageUpload extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'图片上传',
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props)
    this.state = ({
      imgArr: []
    })
  }
  _pickerImage(){
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: false
    }).then(image => {
			this._handleImage(image);
    });
  }
  _openCamera(){
    ImagePicker.openCamera({
      width: 300,
      height: 300,
      cropping: false
    }).then(image => {
			this._handleImage(image);
    });
  }
  //处理选取的图片
  _handleImage(image){
    /** 上传图片到服务器
    let file = {uri: image.path, type: 'multipart/form-data'};
    formData.append("file",file);
    formData.append("userId","111");
    fetch('xxxx',{
        method:'POST',
        headers:{
            'Content-Type':'multipart/form-data',
        },
        body:formData,
    })
    .then((response) => response.json() )
    .then((responseData)=>{
        console.log(responseData);
    })
    .catch((error)=>{
      console.error('error',error);
      alert("上传失败");
    });
    */
    let { imgArr } = this.state
    imgArr.push(image)
    this.setState({
      imgArr
    })
  }
  _renderImgView(){
    let {imgArr } = this.state
    return imgArr.map((item, index) => {
      return(
        <View style={styles.cellView} key={index}>
          <Image style={styles.imgStyle} source={{uri: item.path}}/>
        </View>
      )
    })
  }
  render(){
    return(
      <View style={{flex:1}}>
        <SplitView height={10}/>
        <View style={styles.imgListView}>
          { this._renderImgView() }
          <TouchableOpacity style={[styles.cellView,styles.addImgWrap]} onPress={()=> this._pickerImage()}>
            <Image style={styles.addImg} source={require('@/images/comp/icon_add.png')}/>
          </TouchableOpacity>
          <TouchableOpacity style={[styles.cellView,styles.addImgWrap]} onPress={()=> this._openCamera()}>
            <Image style={styles.addImg} source={require('@/images/comp/icon_camera.png')}/>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  cellView:{
    margin: 5,
    width: imgW,
    height: imgW,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#ccc'
  },
  imgStyle:{
    width: '100%',
    height: '100%'
  },
  imgListView:{
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  addImgWrap: {
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    padding: 10
  },  
  addImg: {
    width: 40,
    height: 40
  }
})